<template>
    <el-container>
        <PageHeader/>
        <el-main>
            <div class="content">
                <el-row class="sideBtn">
                    <SideBtn/>
                </el-row>
                <el-row class="block">
                    <el-row class="block_title"><span class="title_text">银行速贴优势</span></el-row>
                    <el-row class="block_content advantage">
                        <el-col :span="4">
                            <el-row class="icon"><img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/facility.png" alt=""></el-row>
                            <el-row class="feature">便捷</el-row>
                            <el-row class="normal_row">无需开户，在线开通贴现功能</el-row>
                        </el-col>
                        <el-col :span="4">
                            <el-row class="icon"><img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/safety.png" alt=""></el-row>
                            <el-row class="feature">安全</el-row>
                            <el-row class="normal_row">银行直贴系统自动签收并付款</el-row>
                        </el-col>
                        <el-col :span="4">
                            <el-row class="icon"><img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/efficient.png" alt=""></el-row>
                            <el-row class="feature">高效</el-row>
                            <el-row class="normal_row">提票后，资金1分钟内便可到账</el-row>
                        </el-col>
                        <el-col :span="4">
                            <el-row class="icon"><img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/normalize.png" alt=""></el-row>
                            <el-row class="feature">规范</el-row>
                            <el-row class="normal_row">下载银行贴现回单，方便账务处理</el-row>
                        </el-col>
                        <el-col :span="4" class="handleTime">
                            <el-row class="normal_row"><i class="iconfont icon-shijian hpx-red-tips"></i> 银行速贴业务办理时间</el-row>
                            <el-row class="time">工作日 09:00-17:00</el-row>
                            <el-row class="normal_row">目前支持票面<span class="hpx-red-tips">500万元</span>以下</el-row>
                        </el-col>
                        <el-col :span="4" class="application" v-if="applicationStatus == 1">
                            <el-row>
                                <el-button type="primary" round @click="registerDiscount()">申请开通银行速贴功能</el-button>
                            </el-row>
                            <a href="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/kaitongshiyitu.png" target="_blank" class="common_link"><i class="iconfont icon-chakan"></i> 查看在线开通示意图</a>
                        </el-col>
                        <el-col :span="4" class="waitReview" v-if="applicationStatus == 3">
                            <el-row class="hpx-red-tips"><i class="iconfont icon-dengdai"></i> 等待审核</el-row>
                            <el-row class="">您已申请开通速贴功能，</el-row>
                            <el-row class="">银行审核中， </el-row>
                            <el-row class="">预计将在工作日1小时内完成</el-row>
                            <el-row class="">请耐心等待……</el-row>
                        </el-col>
                        <el-col :span="4" class="modifyData" v-if="applicationStatus == 4 || applicationStatus == 2">
                            <el-row>
                                <el-button type="primary" round @click="registerDiscount()">修改资料</el-button>
                            </el-row>
                            <el-row class="hpx-red-tips"><i class="iconfont icon-tishi"></i> 您申请开通速贴功能资料，</el-row>
                            <el-row class="hpx-red-tips">银行审核未通过</el-row>
                            <el-row class="hpx-red-tips">请修改资料后重新提交……</el-row>
                        </el-col>
                        <el-col :span="4" class="initiate" v-if="applicationStatus == 5 || applicationStatus == 6">
                            <el-row>企业名称：<span class="enterpriseName">{{formatStr(userInfo.enterprise_name)}}</span></el-row>
                            <el-row class="status">已开通银行速贴功能</el-row>
                            <el-row>
                                <el-button type="primary" round @click="publish()">发起银行速贴</el-button>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-row>
                <el-row>
                    <el-col class="block_left" ref="block_left">
                        <div class="block">
                            <el-row class="block_title"><span class="title_text">速贴申请开通流程</span></el-row>
                            <el-row class="block_content openProcess">
                                <el-row class="normal_row">
                                    <img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/pic1.png" class="common_ol" alt="">
                                    提前准备开通资料。
                                    <el-popover
                                        placement="right-start"
                                        title="申请开通资料清单"
                                        width="380"
                                        trigger="hover">
                                        <el-row class="listOfdata">
                                            <div class="serial_number"><i class="iconfont icon-icon-test"></i></div>
                                            <div class="list_content">公司营业执照复印件<span class="hpx-red-tips">盖公章</span>并扫描备用</div>
                                        </el-row>
                                        <el-row class="listOfdata">
                                            <div class="serial_number"><i class="iconfont icon-icon-test1"></i></div>
                                            <div class="list_content">法定代表人身份证复印件<span class="hpx-red-tips">盖公章</span>并扫描备用</div>
                                        </el-row>
                                        <el-row class="listOfdata">
                                            <div class="serial_number"><i class="iconfont icon-icon-test3"></i></div>
                                            <div class="list_content">下载《电子银行承兑汇票极速贴现协议(V2.0版)》， 将
                                                <span class="hpx-red-tips">签署页盖公章</span>扫描备用
                                            </div>
                                        </el-row>
                                        <el-row class="listOfdata">
                                            <div class="serial_number"><i class="iconfont icon-icon-test2"></i></div>
                                            <div class="list_content">公司上一年的财务报表；</div>
                                        </el-row>
                                        <el-row class="listOfdata">
                                            <div class="serial_number"><i class="iconfont icon-icon-test5"></i></div>
                                            <div class="list_content">其它应提前准备信息，包括但不限于公司股权结构、 中征码等公司基本信息。</div>
                                        </el-row>
                                        <a href="javascript:;" class="common_link" slot="reference">查看资料清单</a>
                                    </el-popover>
                                </el-row>
                                <el-row class="separate"></el-row>
                                <el-row class="normal_row">
                                    <img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/pic2.png" class="common_ol" alt="">
                                    <span>在线填写企业基本信息并上传基础资料，申请开通。</span>
                                </el-row>
                                <el-row class="separate"></el-row>
                                <el-row class="normal_row especial">
                                    <img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/pic3.png" class="common_ol" alt="">
                                    <span>速贴银行将在工作日1小时内完成资料审核，并以短信方式通知客户或通过平台查看功能开通情况。</span>
                                </el-row>
                                <el-row></el-row>
                                <el-row class="row-hr"></el-row>
                                <el-row class="normal_row"><i class="iconfont icon-tixing hpx-red-tips"></i><span class="secondary_title tips">提醒: </span>如若因资料填写错误导致功能开通申请被驳回，需及时登录修改资料，重新提交申请。</el-row>
                            </el-row>
                        </div>
                        <div class="block">
                            <el-row class="block_title">
                                <span class="title_text">在线询价</span>
                                <span class="title_tips">(实时询价时间: 工作日<span class="hpx-red-tips">09:00-17:00</span>)</span>
                            </el-row>
                            <el-row class="block_content inquire">
                                <el-row class="normal_row">(先输入承兑行关键字查询是否在授信银行名单内，如在请选择；</el-row>
                                <el-row class="normal_row">后续输入票面金额、承兑机构、到期日、贴现日，查询实时报价。)</el-row>
                                <el-form ref="form" :model="form" label-width="90px" size="small" :rules="rules">
                                    <el-form-item label="承兑行:" class="row_first" prop="accept_name">
                                        <el-col :span="12" class="accept_bank">
                                            <el-input placeholder="请输入总行关键字" v-model="form.accept_name" @input="inputAccept"></el-input>
                                            <Select :data="bankList" @select-item="selectItem" v-if="isShowBank"/>
                                        </el-col> 
                                        <a href="javascript:window.open('https://hpx-pc.oss-cn-beijing.aliyuncs.com/font/shouxinmingdan.pdf');" class="common_link">下载授信名单</a>
                                        <el-row class="hpx-red-tips">{{errorMsg}}</el-row>
                                    </el-form-item>
                                    <el-form-item label="票面金额:" prop="faceAmount">
                                        <el-col :span="12" class="bill_price">
                                            <el-input type="number" v-model="form.faceAmount" @input="inputPrice" placeholder="请输入不大于500万"></el-input>
                                            <span class="company">万元</span>
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item label="到期日:" class="row_center" prop="dueDate">
                                        <el-col :span="12">
                                            <el-date-picker
                                                v-model="form.dueDate"
                                                type="date"
                                                placeholder="选择日期"
                                                class="date-picker"
                                                :picker-options="pickerOptions">
                                            </el-date-picker>
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item label="贴现日:" class="row_last" prop="applyDate">
                                        <el-col :span="12">
                                            <el-date-picker
                                                v-model="form.applyDate"
                                                type="date"
                                                placeholder="选择日期"
                                                class="date-picker">
                                            </el-date-picker>
                                        </el-col>
                                        <el-button type="info" size="small" @click="clear">清空</el-button>
                                        <el-button type="primary" size="small" @click="searchRate">查询</el-button>
                                    </el-form-item>
                                </el-form>
                            </el-row>
                        </div>
                    </el-col>
                    <el-col class="block_right">
                        <div class="block">
                            <el-row class="block_title"><span class="title_text">企业速贴流程</span></el-row>
                            <el-row class="block_content tradeProcess">
                                <el-row class="normal_row">(每次贴现无需任何资料，询价后申请直贴，提票后贴现款1分钟内到账。)</el-row>
                                <el-row class="separate noborder"></el-row>
                                <el-row class="secondary_title">
                                    <img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/pic1.png" class="common_ol" alt=""> 发起速贴
                                </el-row>
                                <el-row class="separate">
                                    <el-row class="normal_row">
                                        <span class="strong_tips">上传票面及输入承兑行</span><span>、票面金额、到期日，查询实时报价，发起速贴申请。</span>
                                    </el-row>
                                </el-row>
                                <el-row class="secondary_title">
                                    <img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/pic2.png" class="common_ol" alt=""> 网银提票
                                    <a href="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/tipiaoshiyitu.png" target="_blank"><span class="common_link">示例图</span></a>
                                </el-row>
                                <el-row class="separate">
                                    <el-row class="normal_row">
                                        <span>客户在网银端向贴现银行发起贴现申请上传票面及输入承兑行、到期日信息、贴现利率等。</span>
                                    </el-row>
                                </el-row>
                                <el-row class="secondary_title">
                                    <img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/pic3.png" class="common_ol" alt=""> 银行放款，交易完成
                                </el-row>
                                <el-row class="separate">
                                    <el-row class="normal_row">
                                        <span>贴现银行系统自动收票并付款至企业提票账户，资金1分钟内到账。</span>
                                    </el-row>
                                </el-row>
                            </el-row>
                            <el-row class="tradeProcess_tips">
                                <i class="iconfont icon-tixing hpx-red-tips"></i><span class="secondary_title tips">提醒: </span>
                                <span>贴现企业收款账户须为提票账户；单张贴现票面金额不得超过500万元；贴现票据的 承兑行必须在直贴行授信范围内；贴现申请利率必须与平台公示快贴利率一致；</span>
                                <span class="hpx-red-tips">直贴银行目前不接受回头等瑕疵电票。</span>
                                <!-- <span>贴现企业提票网银: </span>
                                <span class="hpx-red-tips">建议不要通过建行和农行网银提票至快贴银行(可能会导致无法提票或回款较慢等)</span>。 -->
                            </el-row>
                        </div>
                    </el-col>
                    <template>
                        <!-- <Table :tableData="tableData"></Table> -->
                        <el-table
                            :data="tableData.body"
                            :cell-class-name="calcStyle"
                            max-height="500"
                            class="discount_list">
                            <el-table-column
                                v-for="item in tableData.header"
                                :key="item.key"
                                :prop="item.key"
                                :label="item.label">
                            </el-table-column>
                        </el-table>
                    </template>
                </el-row>
            </div>
        </el-main>
        <el-footer>
            <PageFooter/>
        </el-footer>
    </el-container>
</template>

<script lang="ts">
    import {Vue, Component} from 'vue-property-decorator';
    import PageHeader from '@component/common/PageHeader.vue';
    import PageFooter from '@component/common/PageFooter.vue';
    import Table from '@component/common/HpxTable.vue';
    import Select from '@component/common/Select.vue';
    import _ from 'lodash';
    import moment from 'moment';
    import { hideStr, ellipsis } from '@/util/format';
    import { mapActions,mapState } from 'vuex';
    import SideBtn from '@/component/common/SideBtn.vue'
    @Component({
        components: {
            PageHeader,
            PageFooter,
            Table,
            Select,
            SideBtn
        },
        computed: {
            ...mapState({
                sysTime: 'sysTime'
            })
        },
        methods: {
            ...mapActions([
                'getMessageNumber',
                'getAllTips',
                'getSysTime'
            ])
        }
    })
    export default class Discount extends Vue {
        applicationStatus = 1
        isShowBank = false
        bankList:any = []
        //未找到相关银行错误提示
        errorMsg:string = ''
        form = {
            accept_name: '',
            uBankNo: '',
            faceAmount: '',
            dueDate: '',
            applyDate: new Date()
        }
        rules = {
            accept_name: [
                {required: true, message: '请输入承兑行', trigger: 'blur'}
            ],
            faceAmount: [
                {required: true, message: '请输入票面金额', trigger: 'blur'}
            ],
            dueDate: [
                {required: true, message: '请选择到期日', trigger: 'blur'}
            ],
            applyDate: [
                {required: true, message: '请选择贴现日', trigger: 'blur'}
            ]
        }
        tableData:TableData = {
            header:[
                {
                    label: '报价时间',
                    key: 'offer_time'
                },
                {
                    label: '承兑行类型',
                    key: 'bankType'
                },
                {
                    label: '票面金额(万元)',
                    key: 'shortAmt'
                },
                {
                    label: '剩余期限(天)',
                    key: 'shortDays'
                },
                {
                    label: '每十万扣(元)',
                    key: 'every_plus'
                },
                {
                    label: '利率(%)',
                    key: 'billRate'
                },
            ],
            body: [],
            footer: {
                total: 0,
                pageSize: 10,
                currentPage: 1,
            }
        }
    //methods
        //限制日期选择的最小值
        pickerOptions = {
            disabledDate(time) {
                return time.getTime() < Date.now() 
            }
        }
        //申请开通
        registerDiscount () {
            if(!JSON.parse(localStorage.getItem('userInfo'))){
                window.location.href = 'user.html#/?back=user.html#/speedDiscount'
            }else{
                window.location.href = 'user.html#/speedDiscount'
            }
        }
        //发起速贴
        publish () {
            let systemTime = moment(this.sysTime).format('HH:mm:ss')
            let tradTime = '17:00:00'
            if (systemTime > tradTime) {
                this.$confirm('银行速贴业务办理时间：09:00 - 17:00！', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    customClass: 'custom-message-box',
                }).then(() => {
                    // let backUrl = /back=.+$/.exec(location.hash);
                    // location.href = backUrl && backUrl.length == 1 ? backUrl[0].split('=')[1] : "/discount.html";
                    window.location.href = "trade.html#/discount/publish";
                }).catch(() => {})
                return false
            }
            window.location.href = "trade.html#/discount/publish";
        }
        //查询开户状态
        async accountStatus () {
            if(!JSON.parse(localStorage.getItem('userInfo'))){
                this.applicationStatus = 1
                return false
            }
            let res = await this.$http.get('fbank/enterprise/queryStatusInfo')
            if(res.status < 300 && res.data){
                this.applicationStatus = res.data.fBank_enterprise_status
            }
        }
        //贴现利率表查询
        async getRateList () {
            let res = await this.$http.get('fbank/rate/list')
            if(res.status == 200 && res.data.rateArray){
                this.tableData.body = res.data.rateArray
                this.tableData.body.map(item => {
                    item.offer_time = moment(res.data.dateTime).format('YYYY-MM-DD')
                    item.every_plus = '--'
                })
            }
        }
        checkIsLogin () {
            if(!JSON.parse(localStorage.getItem('userInfo'))){
                this.$confirm('您还没有登陆','提醒',{
                    confirmButtonText: '去登陆',
                    cancelButtonText: '取消',
                    customClass: 'custom-message-box'
                }).then(()=>{
                    window.location.href = 'user.html#/?back=discount.html'
                })
                return false
            }
        }
        //输入银行
        async inputAccept () {
            this.checkIsLogin()
            if(this.form.accept_name){
                this.getBankCode()
            }else{
                this.isShowBank = false
            }
        }
        //输入金额
        inputPrice () {
            this.checkIsLogin()
        }
        //富民银行查询
        async getBankCode () {
            let params = {
                bankName: this.form.accept_name
            }
            let res = await this.$http.get('fbank/constants/bankCode',{params},{loading:false})
            if(res.status == 200){
                if(res.data){
                    if(res.data.length == 1){
                        this.form.uBankNo = res.data[0].bankCode
                    }
                    this.bankList = [...res.data]
                    this.isShowBank = true
                    this.errorMsg = ''
                }else{
                    this.errorMsg = res.msg
                }
            }
        }
        //选择银行
        selectItem (item) {
            this.isShowBank = false
            this.form.accept_name = item.bankName
            this.form.uBankNo = item.bankCode
        }
        //利率查询
        async searchRate () {
            if(!JSON.parse(localStorage.getItem('userInfo'))){
                window.location.href = 'user.html#/?back=discount.html'
                return false
            }
            if(!this.form.uBankNo){
                this.$alert('请输入承兑行','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            if(!this.form.faceAmount){
                this.$alert('请输入票面金额','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            if(!this.form.applyDate){
                this.$alert('请选择贴现日','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            let params = {
                uBankNo: this.form.uBankNo,
                faceAmount: Number(this.form.faceAmount)*10000,
                applyDate: moment(this.form.applyDate).format('YYYY/MM/DD'),
                dueDate: moment(this.form.dueDate).format('YYYY/MM/DD')
            }
            
            let res = await this.$http.get('fbank/rate/one',{params})
            if(res.status == 200){
                this.tableData.body = [{
                    offer_time: moment(res.data.dateTime).format('YYYY-MM-DD'),
                    bankType: res.data.sData.bankType,
                    shortAmt: Number(res.data.sData.faceAmount)/10000,
                    shortDays: res.data.sData.day,
                    every_plus: res.data.sData.everyInterest,
                    billRate: res.data.sData.billRate
                }]
            }else{
                this.tableData.body = []
            }
        }
        //清空
        clear () {
            this.isShowBank = false
            this.form = {
                accept_name: '',
                uBankNo: '',
                faceAmount: '',
                dueDate: '',
                applyDate: new Date()
            }
            this.getRateList()
        }
        // get getElementStyle () {
            
        // }
        get tableHeight () {
            return this.tableData.body.length >= 10 ? 500 : ''
        }
        get userInfo () {
            return JSON.parse(localStorage.getItem('userInfo'))
        }
        formatStr (str) {
            return ellipsis(str, '...', 10)
        }
        mounted () {
            this.accountStatus()
            this.getRateList()
            this.getMessageNumber();
            this.getAllTips();
            this.getSysTime();
        }
        calcStyle ({column,row}) {
            if(column.property == 'billRate'){
                return 'red'
            }
        }
    }
</script>

<style lang="scss" scoped>
    .el-main{
        overflow: inherit;
        padding-top: 96px;
    }
    .content{
        width: 84%;
        margin: 20px auto;
        .sideBtn{
            position: fixed;
            top: 50%;
            margin-top: -125px;
            right: 0px;
            z-index: 1000;
        }
        .block{
            width: 100%;
            box-shadow: 2px 2px 10px 0px $__color-line;
            margin-bottom: 20px;
            .block_title{
                width: 100%;
                height: 50px;
                line-height: 50px;
                border-radius: 4px;
                background-color: $__color-bg-primary;
                border-left: 4px solid $__color-primary;
                @extend .hpx-label;
                .title_text{
                    margin-left: 10px;
                    font-size: 18px;
                    @extend .hpx-font-weight;
                }
                .title_tips{
                    font-size: 14px;
                }
            }
            .block_content{
                width: 100%;
            }
            .advantage{
                height: 186px;
                padding: 20px 20px;
                .el-col{
                    text-align: center;
                    padding-top: 15px;
                }
                .icon{
                    img{
                        width: 40px;
                        height: 40px;
                    }
                }
                .feature{
                    color: $__color-show;
                    font-size: 16px;
                    font-weight: 600;
                    line-height: 55px;
                }
                .handleTime{
                    background-color: $__color-bg-primary;
                    height: 146px;
                    padding: 15px 0;
                    border-radius: 4px;
                    .el-row{
                        line-height: 35px;
                    }
                    .time{
                        font-size: 18px;
                        font-weight: 600;
                        line-height: 46px;
                    }
                }
                .application{
                    .el-button{
                        margin: 20px 0 20px 0;
                        box-shadow: 2px 2px 10px $__color-primary;
                    }
                }
                .waitReview{
                    color: $__color-show;
                    font-size: 14px;
                    line-height: 16px;
                    .hpx-red-tips{
                        font-size: 16px;
                        line-height: 50px;
                    }
                }
                .modifyData{
                    font-size: 14px;
                    line-height: 16px;
                    .el-button{
                        margin: 10px 0 20px 0;
                        width: 80%;
                    }
                }
                .initiate{
                    padding: 20px 0;
                    font-size: 14px;
                    .enterpriseName{
                        color: $__color-show;
                        font-weight: 600;
                    }
                    .status{
                        line-height: 30px;
                    }
                    .el-button{
                        margin: 15px 0 20px 0;
                        width: 80%;
                    }
                }
            }
            .openProcess{
                height: 220px;
                padding: 20px 20px 20px 40px;
                .el-row{
                    height: 20px;
                    line-height: 20px;
                }
                .separate{
                    border-left: 1px solid $__color-border;
                    margin-left: 10px;
                }
                .row-hr{
                    border-top: 1px solid $__color-line;
                }
                .normal_row:last-child{
                    font-size: 13px;
                    .tips{
                        font-size: 14px;
                    }
                }
                .especial{
                    height: 40px;
                }
            }
            .inquire{
                padding: 10px 0 20px 40px;
                .el-col{
                    margin-right: 10px !important;
                }
                .row_first{
                    margin-top: 15px;
                    .accept_bank{
                        position: relative;
                    }
                }
                .row_center{
                    .date-picker{
                        width: 100%;
                    }
                }
                .row_last{
                    margin-bottom: 0 !important;
                    .date-picker{
                        width: 100%;
                    }
                }
                .bill_price{
                    position: relative;
                    .company{
                        position: absolute;
                        right: 5px;
                        top: 0;
                    }
                }
            }
            .tradeProcess{
                padding: 10px 20px 0 40px;
                .secondary_title{
                    height: 22px;
                    line-height: 22px;
                }
                .noborder{
                   border-left: none !important; 
                }
                .separate{
                    height: 60px;
                    border-left: 1px solid $__color-border;
                    margin-left: 10px;
                    &:last-child{
                        border-left: none !important;
                    }
                    .normal_row{
                        margin-top: 10px;
                        margin-left: 13px;
                        .strong_tips{
                            color: $__color-show;
                            font-weight: 600;
                        }
                    }
                }
            }
            .tradeProcess_tips{
                padding: 20px 100px 0px 40px;
                height: 216px;
                background-color: $__color-bg-primary;
                line-height: 22px;
                font-size: 14px;
                color: $__color-label;
                // height: 195px;
            }
        }
        .block_left, .block_right{
            width: 49.5%;
            height: 621px;
            float: left;
        }
        .block_right{
            margin-left: 1%;
        }
        .normal_row{
            // display: inline-block;
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            color: $__color-label;
        }
        .common_link{
            color: $__color-link;
            font-size: 14px;
            text-decoration: underline;
        }
        .common_ol{
            width: 20px;
            vertical-align: middle;
            margin-top: -3px;
        }
        .secondary_title{
            font-size: 16px;
            color: $__color-show;
            font-weight: 600;
            height: 22px;
            line-height: 22px;
        }
        .tips{
            font-weight: 500;
        }
        .discount_list{
            border-top: 1px solid $__color-line;
        }
    }
    .listOfdata{
        @extend .normal_row;
        margin-bottom: 12px;
        div{
            float: left;
        }
        .serial_number{
            width: 16px;
            margin-right: 4px;
        }
        .list_content{
            width: calc(100% - 20px);
        }
    }
    @media screen and (max-width: 1700px){
        .content{
            width: 1450px;
        }
    }
    @media screen and (max-width: 1600px){
        .content{
            width: 1420px;
        }
    }
    @media screen and (max-width: 1400px){
        .content{
            width: 1340px;
        }
    }
    @media screen and (max-width: 1300px){
        .content{
            width: 1270px;
        }
    }
    @media screen and (max-width: 1200px){
        .content{
            width: 1200px;
        }
        .openProcess,.tradeProcess{
            padding-left: 20px !important;
        }
    }
</style>
<style lang="scss">
    .content .block{
        .el-form-item--small.el-form-item {
            margin-bottom: 16px !important;
        }
    }
    .el-popover__title{
        color: $__color-label !important;
        font-weight: 600;
    }
    .row_last{
        .date-picker{
            .el-input__inner{
                background: $__color-bg-primary !important;
            }
        }
    }
</style>
